<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>北大青鸟课程导航</title>
        <style type="text/css">
            p,ul,li,body{
                margin: 0px;
                padding: 0px;
            }
            /*p,ul{
                border: 1px solid;
            }*/
            div{
                width: 200px;
                background: #f5f9fc;
                margin: 0px auto
            }
            p{
                color: #1f376d;
                line-height: 30px;
                height: 30px;
                font-size: 18px;
                background: url(title_icon.gif) no-repeat 5px center;
                text-indent: 1.5em;
            }
            a{
                color: black;
                text-decoration: none;
            }
            a:hover{
                color: orange;
            }
            ul{
                list-style-type: none; 
            }
            li{
                background: url(submenu.gif) no-repeat right center;
                font-size: 12px;
                padding-left: 10px;
                line-height: 20px;
                border-top: 1px solid #cfe2f5;
                margin: 5px;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>课程导航</p>
            <ul>
                <li><a href="#">ACCP 软件工程师</a></li>
                <li><a href="#">BTEST 软件测试工程师</a></li>
                <li><a href="#">BENET 网络工程师</a></li>
                <li><a href="#">JBNS 网站工程师</a></li>
                <li><a href="#">ACCP 启蒙星</a></li>
                <li><a href="#">ANDROID 软件工程师</a></li>
                <li><a href="#">JAVA 软件工程师</a></li>
                <li><a href="#">.NET 软件工程师</a></li>
                <li><a href="#">网络营销</a></li>
            </ul> 
        </div>
    </body>
</html>